<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
    <meta charset="UTF-8">
    <title>Welcome to my site! o((>ω< ))o</title>

<!--    <link th:href="@{assets/dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css">-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
</head>
<style>
    body {
        height: 430px;
        /*background-image: url("../../static/assets/img/index_cover.jpg");*/
        background: rgb(100, 100, 100, 0.3);
        z-index: -1;
        /*opacity: 0.5;*/
    }
    .card-img-top {
        border-top-left-radius: calc(-4.75rem - 2px);
        border-top-right-radius: calc(17.25rem - -8px);
    }
    .page-link {
        position: relative;
        display: block;
         color: deeppink;
        text-decoration: none;
        border-radius: 10px;
        background-color: #fff;
        transition: color 50.15s ease-in-out,background-color 0.35s ease-in-out,border-color 2.15s ease-in-out,box-shadow .15s ease-in-out;
    }
    .page-item.active .page-link {
        z-index: 3;
        /* color: #fff; */
        background-color: pink;
        border-color: white;
    }
    .list-group-flush>.list-group-item {
        border-width: 5px 5px 11px;
        margin: 10px;
    }
    .page-link{
        background-color: rgba(192, 88, 88, 0.15);
        border: none;
    }
    .list-group-flush>.list-group-item:last-child {
         border-bottom-width: 12px;
    }
    .list-group-item:last-child {
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .card{
        /*color: black;*/
        background-color: rgb(250, 167, 189);
        border-radius: 10px;
    }

    .card-title{
        color: deeppink;
        font-size: 38px;
        font-weight: bolder;
    }
</style>
<body>
<div th:replace="~{/common/header::header-body}"></div>
<!--<div class="container card" style="width: 18rem;">-->
<!--    <img src="..." class="card-img-top" alt="...">-->
<!--    <div class="card-body">-->
<!--        <h5><a class="card-title" th:each="article:${articles}"></a></h5>-->
<!--        <p class="card-text" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}"></p>-->
<!--        <a class="btn btn-primary">Go somewhere</a>-->
<!--        <p th:text="${article.getContent()}">内容</p>-->
<!--    </div>-->
<!--</div>-->
<div class="container" style="width: 400rem;">
    <div style="display: inline-block">

        <ul class="list-group list-group-flush">
            <img th:src="@{/assets/img/error_cover.jpg}" class="card-img-top" style="width: 100%;height: 75%" alt="...">
            <li class="list-group-item card" th:each="article:${articles}">
                <h3><a class="page-link card-title" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>
                <p class="card-text" th:text="${article.getContent()}">内容</p>
            </li>
        </ul>
    </div>
<!--    <div class="card">-->
<!--        <img th:src="@{/assets/img/osu.png}" class="card-img-top" alt="...">-->
<!--        <ul class="list-group list-group-flush">-->
<!--            <li class="list-group-item card" th:each="article:${articles}">-->
<!--                <h3><a class="page-link" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>-->
<!--                <p th:text="${article.getContent()}">内容</p>-->
<!--            </li>-->
<!--        </ul>-->
<!--    </div>-->


</div>

<!--<div class="container mt-3">-->
<!--    <ul class="list-group list-group-flush">-->
<!--        <li class="list-group-item" th:each="article:${articles}">-->
<!--            <h3><a class="page-link" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>-->
<!--            <p th:text="${article.getContent()}">内容</p>-->
<!--        </li>-->
<!--    </ul>-->
<!--</div>-->

<!--分页页面按钮-->
<div class="container mt-3">
    <ul class="pagination justify-content-center" style="margin:20px 0">
        <!--        上一页需要判断当前页是否已经是第一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==1?1:page-1}}">上一页</a></li>
        <!--        高亮当前页按钮-->
        <li th:each="i:${#numbers.sequence(1, totalPage)}" th:class="${page==i}?'page-item active':'page-item'">
            <a class="page-link" th:href="@{'/page/'+${i}}" th:text="${i}">1</a>
        </li>
        <!--        下一页需要判断当前页是否已经是最后一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==totalPage?totalPage:page+1}}">下一页</a></li>
    </ul>
</div>



<!--<div class="container">-->
<!--    <h2>多种颜色卡片</h2>-->
<!--    <div class="card">-->
<!--        <div class="card-body">基础卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-primary text-white">-->
<!--        <div class="card-body">主要卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-success text-white">-->
<!--        <div class="card-body">成功卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-info text-white">-->
<!--        <div class="card-body">信息卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-warning text-white">-->
<!--        <div class="card-body">警告卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-danger text-white">-->
<!--        <div class="card-body">危险卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-secondary text-white">-->
<!--        <div class="card-body">次要卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-dark text-white">-->
<!--        <div class="card-body">黑色卡片</div>-->
<!--    </div>-->
<!--    <br>-->
<!--    <div class="card bg-light text-dark">-->
<!--        <div class="card-body">浅色卡片</div>-->
<!--    </div>-->
<!--</div>-->

</body>
</html>